import React, { useEffect, useMemo, useState } from 'react'
import VolunteeHome from './VolunteeHome'
import VolunteeActivity from './VolunteeActivity'
import VolunteeMine from './VolunteeMine'
import { TabBar } from 'antd-mobile'
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

export default function Voluntee() {
    // 选项卡展示的列表
    const tabs = [
        { key: 'home', title: '首页', icon: <AppOutline />, com: VolunteeHome },
        { key: 'todo', title: '志愿活动', icon: <UnorderedListOutline />, com: VolunteeActivity },
        { key: 'personalCenter', title: '我的活动', icon: <UserOutline />, com: VolunteeMine },
    ]
    const [activeKey, setActiveKey] = useState('home')

    // 展示的组件
    const ShowPage: any = useMemo(() => {
        const tab = tabs.filter((item: any) => item.key === activeKey)[0];
        // console.log(tab);
        return tab.com
    }, [activeKey])

    return (
        <div>
            <ShowPage></ShowPage>
            <div className='voluntee-nav'>
                <>
                    <TabBar activeKey={activeKey} onChange={setActiveKey}>
                        {tabs.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))}
                    </TabBar>
                </>
            </div>
        </div>
    )
}
